import React from 'react'
import './Search.scss'
// import { dispatch } from '../../store'


export default function Search(props) {
  let searchTypeList = [
    { label: '站内搜索', value: '站内搜索' },
    { label: '百度', value: '百度' },
    { label: '必应', value: '必应' },
    { label: 'bilibili', value: 'bilibili' },
  ]
  let keyword = ''
  let searchType = searchTypeList[0]
  const selectChange = (e) => {
    let i = e.target.selectedIndex
    let val = e.target.options[i].value
    searchType = val
  }
  const inputChange = (e) => {
    keyword = e.target.value
  }
  const submit = () => {
    // dispatch({keyword, searchType})
    props.search({keyword, searchType})
  }
  return (
    <div className='search'>
      <div className='flex-box'>
        <select className='select common' onChange={(e) => selectChange(e)}>
          {
            searchTypeList.map(item => {
              return (
                <option value={item.value} key={item.value}>{item.label}</option>
              )
            })
          }
        </select>
        <input className='input common' onChange={(e) => inputChange(e)} placeholder="请输入"></input>
        <button className='submit common' onClick={submit}>搜索</button>
      </div>
    </div>
  )
}
